<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购-综合网站首选-正品低价,品质保障，配送及时，轻松购物!</title>
    <!-- 网站说明 -->
    <meta name='description' content='品优购商城' />
    <!-- 关键字 -->
    <meta name='keywords' content='手机,电脑,照相机' />
    <!-- 引入字体图标 -->
    <link rel="shortcut icon" href=" favicon.ico" />
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共的样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入index.css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入animate.js -->
    <script src='../js/animate.js'></script>
     <!-- 引入jquery -->
     <script src='../js/jquery.min.js'></script>
    <!-- 引入index.js -->
    <script src='js/index.js'></script>
</head>

<body>
    <!-- 快捷导航模块start -->
    <section class='shortcut'>
        <div class='w'>
            <div class='fl'>
                <ul>
                    <li>品优购欢迎你!&nbsp;</li>
                    <li>
                        <a href='#'>请登录</a>&nbsp;
                        <a href='register.html' class='style_red'>免费注册</a>
                    </li>
                </ul>
            </div>
            <div class='fr'>
                <ul>
                    <li class='arrow-icon'>我的订单 </li>
                    <li></li>
                    <li>我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class='arrow-icon'>关注品优购</li>
                    <li></li>
                    <li class='arrow-icon'>客户服务 </li>
                    <li></li>
                    <li class='arrow-icon'>网站导航</li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 快捷导航案例end -->



    <!-- 头部制作模块start -->
    <header class='header w'>
        <!-- logo模块 -->
        <div class='logo'>
            <h1>
                <a herf='index.html' title='品优购商城'>品优购商城</a>
            </h1>
        </div>
        <!-- seasch搜索模块 -->
        <div class="search">
            <input type='search' name='' id='' placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords模块制作 -->
        <div class="hotwords">
            <a href="" class='style_red'>优惠购首发</a>
            <a href="">亿元优惠</a>
            <a href="">9.9元团购</a>
            <a href="">美满99减3</a>
            <a href="">办公用品</a>
            <a href="">电脑</a>
            <a href="">通信</a>
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">我的购物车 <i class='count'>8</i></div>
    </header>
    <!-- 头部制作模快end -->


    <!-- nav模块start -->
    <nav class='nav '>
        <div class='w'>
            <div class="dropdown">
                <div class="dt">全部商品</div>
                <div class="dd">
                    <ul>
                        <li><a href='#'>家用电器</a></li>
                        <li><a href='list.html'>手机、</a><a href='#'>数码、</a><a href='#'>通信</a< /li>
                        <li><a href='#'>电脑、</a><a href='#'>办公</a></li>
                        <li><a href='#'>手机、</a><a href='#'>数码、</a><a href='#'>通信</a< /li>
                        <li><a href='#'>家居、</a><a href='#'>家装、</a><a href='#'>厨具</a></li>
                        <li><a href='#'>男装、</a> <a href='#'>女装、</a><a href='#'>童装、</a><a href='#'>内衣</a></li>
                        <li><a href='#'>个户化妆、</a><a href='#'>清洁用品、</a><a href='#'>宠物</a></li>
                        <li><a href='#'>鞋靴、</a><a href='#'>箱包、</a><a href='#'>珠宝、</a><a href='#'>奢侈品</a></li>
                        <li><a href='#'>运动户外、</a><a href='#'>钟表</a></li>
                        <li><a href='#'>汽车、</a><a href='#'>汽车用品</a></li>
                        <li><a href='#'>母婴、</a><a href='#'>玩具乐器</a></li>
                        <li><a href='#'>食品、</a><a href='#'>酒类、</a><a href='#'>生鲜、</a><a href='#'>特产</a></li>
                        <li><a href='#'>医药保健</a></li>

                    </ul>
                </div>

            </div>
            <div class="navitems">
                <ul>
                    <li><a href='#'>服装城</a></li>
                    <li><a href='#'>美妆馆</a></li>
                    <li><a href='#'>传智超市</a></li>
                    <li><a href='#'>全球购</a></li>
                    <li><a href='#'>闪购</a></li>
                    <li><a href='#'>团购</a></li>
                    <li><a href='#'>拍卖</a></li>
                    <li><a href='#'>有趣</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav模块end -->



    <!-- 首页专有模块start -->
    <div class="w">
        <div class="main">
            <div class="focus fl">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="arrow_l">
                </a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow_r"> </a>
                <!-- 核心的滚动区域 -->
                <ul>
                    <li>
                        <a href="#"><img src="upload/focus1.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus4.jpg" alt=""></a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="cricle">

                </ol>
            </div>


            <div class="newsflash fr">
                <div class="news">
                    <div class="news-hd">
                        品优购快报
                        <a href="#">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
                            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
                            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_huafei"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                            <span class="hot"></span>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="service_ico service_ico_feiji"></i>
                                <p>机票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>




    <!-- 首页专有模块end -->


    <!-- 推荐模块start -->
    <div class="w recom">
        <div class="recom_hd">
            <img src='images/recom.png'>
            <h3>推荐模块</h3>

        </div>
        <div class="recom_bd">
            <ul>
                <li><a href='#'><img src='images/推荐01.png'></a></li>
                <li><a href='#'><img src='images/推荐02.png'></a></li>
                <li><a href='#'><img src='images/推荐03.png'></a></li>
                <li><a href='#'><img src='images/推荐04.jpg'></a></li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块end -->



    <!-- 猜你喜欢start -->
    <div class='favourite w'>
        <div class='favourite_hd'>
            <h4>猜你喜欢</h4>
            <div class='change'>换一批</div>
        </div>
        <div class="favourite_bd">
            <div class="favourite_bd_list">

                <ul>
                    <li>
                        <a href='#'><img src='upload/喜欢01.png'></a>
                        <div class='jieshao'>
                            <p>阳光美宝新款单肩包女<br>包时尚子母包四件套</p>
                            <div class=price>￥119.00</div>

                        </div>

                    </li>
                    <li>
                        <a href='#'><img src='upload/喜欢02.png'></a>
                        <div class='jieshao'>
                            <p>爱仕达 30cm炒锅不粘<br>锅NWG833OE磁炉锅</p>
                            <div class=price>￥99.00</div>

                        </div>

                    </li>
                    <li>
                        <a href='#'><img src='upload/喜欢03.png'></a>
                        <div class='jieshao'>
                            <p>捷波朗<br>（jabra）BOOSI劲步</p>
                            <div class=price>￥245.00</div>

                        </div>

                    </li>
                    <li>
                        <a href='#'><img src='upload/喜欢04.png'></a>
                        <div class='jieshao'>
                            <p>欧普<br>JYLZ08面板灯平板灯铝</p>
                            <div class=price>￥238.00</div>

                        </div>

                    </li>
                    <li>
                        <a href='#'><img src='upload/喜欢05.png'></a>
                        <div class='jieshao'>
                            <p>三星<br>（G5500）移动lian</p>
                            <div class=price>￥649.00</div>

                        </div>

                    </li>
                    <li>
                        <a href='#'><img src='upload/喜欢06.png'></a>
                        <div class='jieshao'>
                            <p>韩国所望<br>紧致湿润精华露400ml</p>
                            <div class=price>￥649.00</div>

                        </div>

                    </li>
                </ul>


            </div>
        </div>
    </div>
    <!-- 猜你喜欢end -->



    <!-- 传智博客start -->
    <div class='boke w'>
        <div class="boke_hd">
            <h4>传智博客 有趣区</h4>
        </div>
        <div class="boke_bd">
            <ul>
                <li class='col_403'>
                    <a href='#'><img src='upload/播客01.png'></a>
                </li>

                <li class='col_227 '>
                    <a href='#' class='dd'><img src='upload/播客02.png'></a>
                    <a href='#'><img src='upload/播客03.png'></a>
                </li>

                <li class='col_407 '>
                    <a href='#' class='dd'><img src='upload/播客04.png'></a>
                    <a href='#'><img src='upload/播客05.png'></a>
                    <a href='#'><img src='upload/播客06.png'></a>
                </li>

                <li class='col_161'>
                    <a href='#'><img src='upload/播客07.png'></a>
                </li>
        </div>


    </div>
    <!-- 传智播客end -->


    <!-- 楼层区域制作start -->
    <div class="floor">
        <!-- 1楼家用电器楼层 -->
        <div class=" w jiadian">
            <div class="box_hd">
                <h3>家电</h3>
                <div class="tab_list">
                    <ul>
                        <li> <a href='#' class='style_red'>热门</a>|</li>
                        <li><a href='#'>大家电</a>|</li>
                        <li><a href='#'>厨房电器</a>|</li>
                        <li><a href='#'>生活电器</a>|</li>
                        <li><a href='#'>个护健康</a>|</li>
                        <li><a href='#'>店铺</a>应季电器|</li>
                        <li><a href='#'>空气净水</a>|</li>
                        <li><a href='#'>新奇特</a>|</li>
                        <li><a href='#'>高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class='tab_list_item'>
                        <div class="col_210">
                            <ul>
                                <li><a href='#'>节能补贴</a></li>
                                <li><a href='#'>4k电视</a></li>
                                <li><a href='#'>空气净化器</a></li>
                                <li><a href='#'>IH电饭煲</a></li>
                                <li><a href='#'>滚筒洗衣机</a></li>
                                <li><a href='#'>电热水器</a></li>
                                <a href='#'><img src='upload/floor-1-1.png'></a>
                            </ul>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src='upload/floor-1-b01.png'>
                            </a>
                        </div>
                        <div class="col_221">
                            <a href='#' class='bb'><img src='upload/floor-1-2.png'></a>
                            <a><img src='upload/floor-1-3.png'></a>
                        </div>
                        <div class="col_221">
                            <a href='#'><img src='upload/floor-1-4.png'></a>
                        </div>
                        <div class="col_219">
                            <a href='#' class='bb'><img src='upload/电脑06.png'></a>
                            <a href='#'><img src='upload/floor-1-6.png'></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 品牌 -->
        <a href='#' class='pinpai w'>
            <img src='upload/品牌01.png'>
        </a>



        <!-- 手机模块 -->
        <div class=" w shouji">
            <div class="box_hd">
                <h3>手机</h3>
                <div class="tab_list">
                    <ul>
                        <li> <a href='#' class='style_red'>热门</a>|</li>
                        <li><a href='#'>品质优选</a>|</li>
                        <li><a href='#'>新机尝鲜</a>|</li>
                        <li><a href='#'>高性价比</a>|</li>
                        <li><a href='#'>口碑推荐</a>|</li>
                        <li><a href='#'>合约机</a>|</li>
                        <li><a href='#'>手机卡</a>|</li>
                        <li><a href='#'>店铺精选</a>|</li>
                        <li><a href='#'>手机配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class='tab_list_item'>
                        <div class="col_210">
                            <ul>
                                <li><a href='#'>手机通讯</a></li>
                                <li><a href='#'>依旧换新</a></li>
                                <li><a href='#'>双卡双待</a></li>
                                <li><a href='#'>自营配件</a></li>
                                <li><a href='#'>金属机身</a></li>
                                <li><a href='#'>高清屏</a></li>
                                <a href='#'><img src='upload/手机01.png'></a>
                            </ul>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src='upload/手机02.png'>
                            </a>
                        </div>
                        <div class="col_221">
                            <a href='#' class='bb'><img src='upload/手机03.png '></a>
                            <a><img src='upload/手机04.png'></a>
                        </div>
                        <div class="col_221">
                            <a href='#'><img src='upload/手机05.png'></a>
                        </div>
                        <div class="col_219">
                            <a href='#' class='bb'><img src='upload/手机06.png'></a>
                            <a href='#'><img src='upload/手机07.png'></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
          <!-- 品牌 -->
           <a href='#' class='pinpai w '>
            <img src='upload/品牌02.png'>
        </a>


      



        <!--电脑办公模块  -->
        <div class=" w diannaobangong">
            <div class="box_hd">
                <h3>电脑办公</h3>
                <div class="tab_list">
                    <ul>
                        <li> <a href='#' class='style_red'>热门</a>|</li>
                        <li><a href='#'>电脑/平板</a>|</li>
                        <li><a href='#'>潮流影音</a>|</li>
                        <li><a href='#'>智能/外设</a>|</li>
                        <li><a href='#'>DIY硬件</a>|</li>
                        <li><a href='#'>电竞游戏</a>|</li>
                        <li><a href='#'>办公/网络</a>|</li>
                        <li><a href='#'>文具电教</a>|</li>
                        <li><a href='#'>精选配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class='tab_list_item'>
                        <div class="col_210">
                            <ul>
                                <li><a href='#'>SSD硬盘</a></li>
                                <li><a href='#'>显示器</a></li>
                                <li><a href='#'>机械键盘</a></li>
                                <li><a href='#'>台式机</a></li>
                                <li><a href='#'>组装电脑</a></li>
                                <li><a href='#'>配件专区</a></li>
                                <a href='#'><img src='upload/电脑01.png'></a>
                            </ul>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src='upload/电脑02.png'>
                            </a>
                        </div>
                        <div class="col_221">
                            <a href='#' class='bb'><img src='upload/电脑03.png '></a>
                            <a><img src='upload/电脑04.png'></a>
                        </div>
                        <div class="col_221">
                            <a href='#'><img src='upload/电脑05.png'></a>
                        </div>
                        <div class="col_219">
                            <a href='#' class='bb'><img src='upload/电脑06.png'></a>
                            <a href='#'><img src='upload/电脑07.png'></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 品牌 -->
        <a href='#' class='pinpai w'>
            <img src='upload/品牌03.png'>
        </a>
    </div>


    <!-- 楼层区域制作end -->




    <!-- 热门疯抢start-->


    <div class=" fengqiang w">
        <div class="fengqiang_hd">
            <h3>热门疯抢</h3>
        </div>
        <div class="fengqiang_bd">
            <div class='fengqiang_list'>
                <div class="col_238">
                    <a href='#'><img src='upload/热门疯抢01.png'></a>
                </div>
                <div class="col_220">
                    <a href='#' class='bb'><img src='upload/热门疯抢02.png '></a>
                    <a><img src='upload/热门疯抢03.png'></a>
                </div>
                <div class="col_220">
                    <a href='#' class='bb'><img src='upload/热门疯抢04.png '></a>
                    <a><img src='upload/热门疯抢03.png'></a>
                </div>
                <div class="col_220">
                    <a href='#' class='bb'><img src='upload/热门疯抢03.png '></a>
                    <a><img src='upload/热门疯抢05.png'></a>
                </div>
                <div class="col_297">
                    <img src='upload/热门疯抢06.png'></a>
                </div>
            </div>
        </div>
        <!-- 热门疯抢end -->


        <!-- 电梯导航start -->

        <div class="fixedtool">
            <ul>
                <li class='curent'>家电</li>
                <li>品牌</li>
                <li>手机</li>
                <li>品牌</a></li>
                <li>电脑办公</li>
            </ul>
        </div>
        <!-- 电梯导航end -->












        <!-- 底部模块制作 start -->
        <footer class='footer'>
            <div class='w'>
                <div class="mod-service">
                    <ul>
                        <li>
                            <h5></h5>
                            <div class='service_txt'>
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class='service_txt'>
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class='service_txt'>
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class='service_txt'>
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class='mod_help'>
                    <dl>
                        <dt>服务指南
                        <dd><a href='#'>购物流程</a></dd>
                        <dd><a href='#'>会员介绍</a></dd>
                        <dd><a href='#'>生活旅行/团购</a></dd>
                        <dd><a href='#'>常见问题</a></dd>
                        <dd><a href='#'>大家电</a></dd>
                        <dd><a href='#'>联系客服</a></dd>
                        </dt>
                    </dl>
                    <dl>
                        <dt>支付方式
                        <dd><a href='#'>购物流程</a></dd>
                        <dd><a href='#'>会员介绍</a></dd>
                        <dd><a href='#'>生活旅行/团购</a></dd>
                        <dd><a href='#'>常见问题</a></dd>
                        <dd><a href='#'>大家电</a></dd>
                        <dd><a href='#'>联系客服</a></dd>
                        </dt>
                    </dl>
                    <dl>
                        <dt>售后服务
                        <dd><a href='#'>购物流程</a></dd>
                        <dd><a href='#'>会员介绍</a></dd>
                        <dd><a href='#'>生活旅行/团购</a></dd>
                        <dd><a href='#'>常见问题</a></dd>
                        <dd><a href='#'>大家电</a></dd>
                        <dd><a href='#'>联系客服</a></dd>
                        </dt>
                    </dl>
                    <dl>
                        <dt>特色服务
                        <dd><a href='#'>购物流程</a></dd>
                        <dd><a href='#'>会员介绍</a></dd>
                        <dd><a href='#'>生活旅行/团购</a></dd>
                        <dd><a href='#'>常见问题</a></dd>
                        <dd><a href='#'>大家电</a></dd>
                        <dd><a href='#'>联系客服</a></dd>
                        </dt>
                    </dl>
                    <dl>
                        <dt>服务指南
                        <dd><a href='#'>购物流程</a></dd>
                        <dd><a href='#'>会员介绍</a></dd>
                        <dd><a href='#'>生活旅行/团购</a></dd>
                        <dd><a href='#'>常见问题</a></dd>
                        <dd><a href='#'>大家电</a></dd>
                        <dd><a href='#'>联系客服</a></dd>
                        </dt>
                    </dl>
                    <dl>
                        <dt>帮助中心
                        <dd>
                            <img src='images/wx_cz.jpg'>
                            品优购客户端
                        </dd>
                        </dt>
                    </dl>
                </div>
                <div class="mod_copyright">
                    <div class='links'>
                        <a href='#'>关于我们<span>|</span></a>
                        <a href='#'>联系我们<span>|</span></a>
                        <a href='#'>联系客服<span>|</span></a>
                        <a href='#'>商家入驻<span>|</span></a>
                        <a href='#'>营销中心<span>|</span></a>
                        <a href='#'>手机品优购<span>|</span></a>
                        <a href='#'>友情链接<span>|</span></a>
                        <a href='#'>销售联盟<span>|</span></a>
                        <a href='#'>品优购工艺<span>|</span></a>
                        <a href='#'>Eglish Site<span>|</span></a>
                        <a href='#'>Contact U</a>
                    </div>
                    <div class="copyright">地址：北京昌平区建材城西路检验龙办公楼一层 邮编：100096 电话：
                        400-618-4000 传真: 019-82935100 邮箱: zhangj+itcast.cn</div>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
    </div>


    </footer>
    <!-- 底部模块制作 end -->
      <!-- 引入懒加载页面 -->
      <!-- <script src="js/EasyLazyload.min.js"></script>
      <script>
          lazyLoadInit({
              showTime:1100,
              onLoadBackEnd:function(i,e){
                  console.log("onLoadBackEnd:"+i);
              }
              ,onLoadBackStart:function(i,e){
                  console.log("onLoadBackStart:"+i);
              }
          });
      </script> -->
</body>




<!-- 精灵图 -->
<!-- <script>
    var h5=document.querySelectorAll('h5');
    for(var i=0;i<h5.length;i++){
        var index=i*51+3;
        h5[i].style.backgroundPosition='-252px -'+index+'px'; 
    }
    
   
    // var is=document.querySelectorAll('i');
    // for(var i=0;i<is.length;i++){
    //    var index2=i*14+15;
    //    var index1=i*23+19;
    //     is[i].style.backgroundPosition='-'+index1+'px -'+index2+'px';
       
    // }
    // console.log((11));

</script>  -->


</html>